<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap-表格</title>
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <h4>.table-striped 类在 tbody 内添加斑马线形式的条纹 ( IE8 不支持):</h4>
    <table class="table table-striped table-bordered table-hover table-condensed">
        <thead>
            <tr>
                <th>#</th>
                <th>Firstname</th>
            </tr>
        </thead>
        <caption>table的类</caption>
        <tbody>
            <tr >
                <th>1</th>
                <th>Jack</th>
            </tr>
            <tr>
                <th>2</th>
                <th>Lucy</th>
            </tr>
            <tr>
                <th>3</th>
                <th>John</th>
            </tr>
        </tbody>
    </table>

    <h4>tr, th 和 td 类</h4>
    <table class="table table-bordered table-responsive">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
            </tr>
        </thead>
        <caption>tr th td 类</caption>
        <tbody>
            <tr class="active">
                <th>1</th>
                <th>小明</th>
            </tr>
            <tr class="success">
                <th>2</th>
                <th>小红</th>
            </tr>
            <tr class="info">
                <th>3</th>
                <th>小白</th>
            </tr>
            <tr class="warning">
                <th>4</th>
                <th>小黄</th>
            </tr>
            <tr class="danger">
                <th>5</th>
                <th>小龙</th>
            </tr>
        </tbody>
    </table>
</div>




<script src="jquery-3.2.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>